Conversation
Compare 2-4 packages side-by-side at `/compare` with facets including: - Performance: package size, install size, dependencies (later: total deps) - Health: weekly downloads, last updated, deprecation status - Compatibility: TypeScript types, module format, (Node.js) engines - Security & Compliance: license, vulnerabilities User can select which facets to display via checkboxes, with convenient groups and quick all/none buttons per group and globally. URL is source of truth for selected packages and facets, allowing easy sharing. The "total install size" metric is fetched lazily after initial load and rendered initially with a loading fallback, as it is quite slow to compute. For numeric facets, a proportional bar is shown behind the value for easy visual comparison. The greatest value in the row is used as the 100% reference. I tried to limit subjective/opinionated highlights and such, but I did add red for Deprecated, green for no vulns, green for included types and blue for external types (seems neutral enough...), and some basic yellow/red for egregious last updated time. Add a "Compare to..." entry point on package page (keyboard shortcut: `c`) and a "compare" top nav item.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
Lunaria Status Overview🌕 This pull request will trigger status changes. Learn moreBy default, every PR changing files present in the Lunaria configuration's You can change this by adding one of the keywords present in the Tracked Files
Warnings reference
|
There was a problem hiding this comment.
This (and some other components) was intended to be reusable for both package comparison and foo@1.2.3 vs. foo@4.5.6 comparison, though I ended up not including the latter in this already huge PR 😅.
| <!-- Category header with all/none buttons --> | ||
| <div class="flex items-center gap-2 mb-2"> | ||
| <span class="text-[10px] text-fg-subtle uppercase tracking-wider"> | ||
| {{ $t(`compare.facets.categories.${category}`) }} |
There was a problem hiding this comment.
💭 is interpolation inside a t() bad practice?
and make it a teeny bit more compact
- use the existing package search composable - improve loading states in result grid: facet-level and column-level, and don't hide existing data for some columns/rows while new/others are loading
|
this looks amazing. there are some mobile issues - no link to the page in the menu and it overflows the page (ideally just the table would be scrollable) I'll add a mobile menu which should help with all the content that's going in the top bar |
4 participants
npmx.package.compare.demo.mp4
npmx.package.compare.demo.defer.2.mp4
Compare 2-4 packages side-by-side at
/comparewith facets including:User can select which facets to display via checkboxes, with convenient groups and quick all/none buttons per group and globally.
URL is source of truth for selected packages and facets, allowing easy sharing.
The "total install size" metric is fetched lazily after initial load and rendered initially with a loading fallback, as it is quite slow to compute.
For numeric facets, a proportional bar is shown behind the value for easy visual comparison. The greatest value in the row is used as the 100% reference.
I tried to limit subjective/opinionated highlights and such, but I did add red for Deprecated, green for no vulns, green for included types and blue for external types (seems neutral enough...), and some basic yellow/red for egregious last updated time.
Add a "Compare to..." entry point on package page (keyboard shortcut:
c) and a "compare" top nav item.